import React, { Component } from 'react'
import { Table,Row,Col,Modal,Button } from 'antd';
import { getHeroList } from '../../utils/api'
import './shop.scss'
import CateSelect from '../../components/Cates/CateSelect'

export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            cate:'全部',
            visible:false
        }
    }
    componentWillMount() {
        let params = {
            name: '',
            position: '',
            price: ''
        }
        getHeroList(params).then(res => {
            console.log('英雄数据', res)
            let arr = [];
            res.map(ele => {
                let obj = {
                    key: ele._id,
                    name: ele.name,
                    position: ele.position,
                    ultimate: ele.ultimate,
                    price: ele.price,
                };
                arr.push(obj);
                return '';
            })
            this.setState({
                data: arr
            })
            console.log(arr);
        })
    }
    tableRowHandle(type) {
        switch (type) {
            case 'edit':
                this.setState({visible:true})
                break;
        
            default:
                break;
        }
    }
    cateFilter(val){
        console.log('zzzz',val)
        this.setState({
            cate:val
        })
        let params = {
            position:val
        }
        getHeroList(params).then(res=>{
            console.log('567',res)
            this.setState({
                data : res
            })
        })
    }
    //编辑功能
    modelBtnClick(type){
        switch (type) {
          case 'ok':
              //提交接口
            break;
        case 'cancel':
            this.setState({visible:false})
        break
          default:
            break;
        }
      }


    skip(){
        this.props.history.push('/good/add') //跳转到新增页面
    }
    render() {
        let { data,cate,visible } = this.state
        const columns = [
            {
                title: '英雄名称',
                dataIndex: 'name',
                key: 'name',
                render: (text,row,index)=>{
                    return (
                        <div>
                            {/* <img /> */}
                            <div>{text}</div>
                        </div>
                    )
                }
            },
            {
                title: '定位',
                dataIndex: 'position',
                key: 'age',
            },
            {
                title: '技能介绍',
                dataIndex: 'ultimate',
                key: 'address',
            },
            {
                title: '价格',
                key: 'tags',
                dataIndex: 'price',
            },
            {
                title: '操作',
                dataIndex: 'handle',
                key: 'handle',
                render: (text, row) => {
                    return (
                        <div className='table-handle'>
                            <a onClick={this.tableRowHandle.bind(this, 'edit', row)}>编辑</a>
                            <a>删除</a>
                        </div>
                    )
                }
            }
        ];
        return (
            <div>
                <Row align={"middle"}>
                    <Col span={2} >
                    商品筛选
                    </Col>
                    <Col span={4}>
                        <CateSelect value={cate} onChange={this.cateFilter.bind(this)}></CateSelect>
                    </Col>
                </Row>
                <Row>
                    <Button size='small' onClick={this.skip.bind(this)}>新增</Button>
                </Row>
                <Table columns={columns} dataSource={data} />
                <Modal
                    title="Basic Modal"
                    visible={visible}
                    onOk={this.modelBtnClick.bind(this,'ok')}
                    onCancel={this.modelBtnClick.bind(this,'cancel')}
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </div>
        )
    }
}
